﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文字转语音</title>
    <script src="lib/jquery/dist/jquery.js"></script>
    <style>
        body, div, input, span {
            margin: 0;
            padding: 0
        }

        body {
            background-color: #f7f7f7
        }

        div {
            display: block;
            width: 600px;
            clear: both;
            margin: 160px auto 0 auto
        }

        input, span {
            display: inline-block
        }

        input {
            width: 400px;
            height: 60px;
            line-height: 60px;
            margin-right: 22px;
            border: 1px solid #ddd;
            border-radius: 5px;
            text-align: left;
            text-indent: 15px;
            font-size: 20px;
            font-family: "Microsoft YaHei",Arial,"Helvetica Neue",Helvetica,STHeiTi,sans-serif;
            color: #000
        }

        span {
            width: 80px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: #fff;
            font-size: 20px;
            background-color: #208DFB;
            border-radius: 5px
        }
    </style>
</head>
<body>
    <audio id="yuyin" muted hidden="hidden" controls="controls"></audio>
    <div>
        <div>设备唯一标识：<b id="deviceId"></b></div>
        
    </div>
    <div>
        <input type="text" value="再长的路，一步步也能走完" />
        <span>朗读</span>
    </div>
    <script>
        var hostUrl = "";
        function TxtToSound(str) {
            var audio = document.getElementById('yuyin');
            $.get(hostUrl + '/api/TextToSpeach?text=' + str, function (data) {
                var jsonResult = JSON.parse(data);
                if (jsonResult.code === 0) {
                    $('#yuyin').attr('src', hostUrl + jsonResult.url);
                    try {
                        audio.play();
                    } catch (e) {
                        JsBridge.PlayAudio(hostUrl + jsonResult.url);
                    }
                }
            }, 'text');
        }
        $(function () {
            var ua = navigator.userAgent;
            if (ua.indexOf("JinWeiSoftAndroid") != -1) {
                $('span').click(function () {
                    var _txt = $('input').val();
                    if (_txt == '') return;
                    TxtToSound(_txt);
                });
                $('span').click();
                console.log(JsBridge);
                var deviceID = JsBridge.getDeviceID();
                $("#deviceId").html(deviceID);
            } else {
                alert('请检查配置信息！');
            }            
        });
    </script>
</body>
</html>